<template>
    <div class="navbar">
        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" text-color="#fff"
            :default-active="$route.path" :default-openeds="['/students']" :router="true">
            <Menu :menuList="menuNodes" />
        </el-menu>
    </div>
</template>
<script setup lang="ts">
import menuList from '../../config/menuConfig.ts';
import Menu from './menu/index.vue';
import { useRoute } from 'vue-router';
import type { MenuData } from "./types/type.ts"
const $route = useRoute();
import useUserStore from '@/store/modules/user';

const userStore = useUserStore();
const hasAuth = (item: MenuData) => {
    const { index, isPublic } = item;
    const user = userStore.user;
    if (!user || !user.role) return false;
    //@ts-ignore
    const menus = userStore.user.role.menus || [];
    //@ts-ignore
    const username = userStore.user.username;
    if (username == "admin" || isPublic == true || menus.indexOf(index) != -1) {
        return true;
    } else {
        return false;
    }
};
let menuNodes: any[] = [];
const getMenuNodes = () => {
    menuList.forEach(item => {
        if (!item.children) {
            if (hasAuth(item)) {
                menuNodes.push(item)
            }
        } else {
            let arr: any[] = []
            item.children.forEach(child => {
                if (hasAuth(child)) {
                    arr.push(child)
                }
            })
            let obj = { ...item, children: arr }
            menuNodes.push(obj)
        }
    })
}
getMenuNodes()
</script>
<style scoped>
.el-menu {
    border: 0;
}
</style>